<template>
    <div class="purchase">
      <div class="purchase_top" style="padding-top: 20px">
        <div style="font-size: 17px">设置止盈止损</div>
        <span
          style="
            font-size: 20px;
            color: #fff;
            position: absolute;
            right: 3%;
            top: 16px;
          "
          @click="stop"
          >✕</span
        >
      </div>
      <div style="font-size: 15px; color: #fff; margin-top: 20px">
        scrusdt 交割
      </div>
      <div class="purchase_fu" style="margin-top: 10px">
        <span style="color: #929292; font-size: 13px">最新价格</span>
        <span style="color: #fff; font-size: 14px">1.396</span>
      </div>
      <div class="purchase_fu">
        <span style="color: #929292; font-size: 13px">委托价格</span>
        <span style="color: #fff; font-size: 14px">1.396</span>
      </div>
      <div class="purchase_fu">
        <span style="color: #929292; font-size: 13px">委托数量</span>
        <span style="color: #fff; font-size: 14px">0 SCR</span>
      </div>
  
      <div class="purchase_but">
        <div
          class=""
          @click="index = 1"
          :class="index == 1 ? 'purchase_but_right' : 'purchase_but_left'"
        >
          多开
        </div>
        <div
          class=""
          @click="index = 0"
          :class="index == 0 ? 'purchase_but_right' : 'purchase_but_left'"
        >
          开空
        </div>
      </div>
      <div class="Stop_flex">
        <div style="display: flex; font-size: 16px; color: #fff">
          <span>触发止盈</span>
          <van-icon
            name="play"
            color="#fff"
            style="
              margin-top: 5px;
              transform: rotate(90deg) translate(-2px, -5px);
            "
            size="14"
          />
        </div>
        <div>
          <van-checkbox v-model="checked" shape="square">降价委托</van-checkbox>
        </div>
      </div>
  
      <div class="purchase_two">
        <div class="purchase_two_left">
          <input
            type="text"
            placeholder="触发价"
            style="
              width: 60%;
              background-color: #1a1a1a;
              border: none;
              text-indent: 0.4rem;
            "
          />
          <span style="margin-right: 5px"
            >最新
            <van-icon
              name="play"
              color="#fff"
              style="margin-top: 5px; transform: rotate(90deg) translate(-1px, 0)"
              size="12"
          /></span>
        </div>
        <div class="purchase_two_left">
          <span style="text-indent: 0.99rem"
            >涨跌幅
            <van-icon
              name="play"
              color="#fff"
              style="
                margin-top: 5px;
                transform: rotate(90deg) translate(-8px, 5px);
              "
              size="12"
          /></span>
          <span style="margin-right: 5px">%</span>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div class="progress-bar-container">
          <div class="slider-container">
            <vue-slider
              v-model="percentageVal"
              :marks="{
                0: '',
                25: percentageVal == 25 ? '25%' : '',
                50: percentageVal == 50 ? '50%' : '',
                75: percentageVal == 75 ? '75%' : '',
                100: percentageVal == 100 ? '100%' : '',
              }"
              :included="true"
              :step="25"
              :min="0"
              :max="100"
              :process-style="{ backgroundColor: '#fff', height: '4px' }"
              :rail-style="{ backgroundColor: '#191919', height: '4px' }"
              @change="exchangeVal"
            >
              <template v-slot:step="{ active }">
                <div :class="['custom-step', { active }]"></div>
              </template>
            </vue-slider>
          </div>
          <div class="progress-bar-labels">
            <span :key="label" v-for="label in labels" style="color: #fff">{{
              label
            }}</span>
          </div>
        </div>
      </div>
      <div class="Stop_flex">
        <div style="display: flex; font-size: 16px; color: #fff">
          <span>止损</span>
        </div>
        <div>
          <van-checkbox
            v-model="checkedo"
            shape="square"
            color="#fff"
            style="color: red !important"
            size="16"
            >限价委托</van-checkbox
          >
        </div>
      </div>
      <div class="purchase_two">
        <div class="purchase_two_left">
          <!-- <span>触发价</span> -->
          <input
            type="text"
            placeholder="触发价"
            style="
              width: 60%;
              background-color: #1a1a1a;
              border: none;
              text-indent: 0.4rem;
            "
          />
          <span style="margin-right: 5px"
            >最新
            <van-icon
              name="play"
              color="#fff"
              style="margin-top: 5px; transform: rotate(90deg) translate(-1px, 0)"
              size="12"
          /></span>
        </div>
        <div class="purchase_two_left">
          <span style="text-indent: 0.99rem"
            >涨跌幅
            <van-icon
              name="play"
              color="#fff"
              style="
                margin-top: 5px;
                transform: rotate(90deg) translate(-8px, 5px);
              "
              size="12"
          /></span>
  
          <span style="margin-right: 5px">%</span>
        </div>
      </div>
      <div style="margin-top: 10px">
        <div class="progress-bar-container">
          <div class="slider-container">
            <vue-slider
              v-model="percentageVals"
              :marks="{
                0: '',
                25: percentageVal == 25 ? '25%' : '',
                50: percentageVal == 50 ? '50%' : '',
                75: percentageVal == 75 ? '75%' : '',
                100: percentageVal == 100 ? '100%' : '',
              }"
              :included="true"
              :step="25"
              :min="0"
              :max="100"
              :process-style="{ backgroundColor: '#fff', height: '4px' }"
              :rail-style="{ backgroundColor: '#191919', height: '4px' }"
              @change="exchangeVal"
            >
              <template v-slot:step="{ active }">
                <div :class="['custom-step', { active }]"></div>
              </template>
            </vue-slider>
          </div>
          <div class="progress-bar-labels">
            <span :key="label" v-for="label in labels" style="color: #fff">{{
              label
            }}</span>
          </div>
        </div>
      </div>
  
      <div class="purchase_fu_but">卖出BTC</div>
    </div>
  </template>
  
  <script>
  import { Checkbox, CheckboxGroup } from "vant";
  import VueSlider from "vue-slider-component";
  import "vue-slider-component/theme/default.css";
  export default {
    name: "Stop",
    data() {
      return {
        percentage: 0,
        labels: ["0%", "5%", "10%", "15%", "20%"],
        checked: false,
        checkedo: false,
        index: 1,
        percentageVal: "",
        percentageVals: "",
      };
    },
    components: {
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup,
      VueSlider,
    },
    methods: {
      stop() {
        this.$emit("showtop", false);
      },
    },
  };
  </script>
  <style scoped lang="scss">
  select {
    appearance: none;
    /* 去掉默认图标 */
    -moz-appearance: none;
    /* Firefox */
    -webkit-appearance: none;
    /* Safari and Chrome */
    padding: 0 20px 0 20px;
    background: url("../../assets/image/public/grey-select.png") no-repeat scroll
      right center transparent;
    /* 自己的图*/
    background-size: 20px 11px;
  }
  
  .with100 {
    width: 100%;
  }
  
  .height100 {
    height: 100%;
  }
  
  .targetPrice {
    opacity: 1;
  }
  
  .inputBackground {
    border-radius: 10px;
  
    input {
      background: transparent !important;
    }
  }
  
  .custom-step {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    // border: solid 1px #fff;
    background: #212121;
    transform: translateY(-6px);
  }
  
  .custom-step.active {
    box-shadow: 0 0 0 2px #fff;
    background-color: #000000;
    transform: translate(-5px, -6px);
  }
  
  .tab-item {
    display: flex;
    align-items: center;
    justify-content: center;
  
    @include themify() {
      background: themed("input_background");
    }
  
    border-radius: 4px;
    margin-right: 10px;
    padding: 10px 0;
  }
  
  .total-list {
    @include themify() {
      background: themed("grey_bg");
    }
  
    display: flex;
  
    @include themify() {
      color: themed("text_color");
    }
  
    font-size: 26px;
    align-items: center;
    justify-content: center;
    // margin-bottom: 20px;
    position: relative;
  
    // ::after {
    //   position: absolute;
    //   content: '';
    //   top: 20%;
    //   left: 50%;
    //   height: 40px;
    //   background: #373737;
    //   width: 1px;
  
    // }
  
    .total-div {
      flex: 1;
      text-align: center;
      padding: 20px 0;
      background-color: #191919;
    }
  }
  
  .add-icon {
    color: #fff;
    margin-left: 10px;
  }
  
  .active-bg {
    @include themify() {
      background: themed("bg_dark");
    }
  }
  
  .select-active {
    background: #2ebd85;
  
    @include themify() {
      color: themed("text_color") !important;
    }
  }
  
  .buyandSell {
    position: relative;
    z-index: 9;
    border-radius: 99px;
  }
  
  .slider-container {
    padding: 20px 10px;
    margin: 10px 0;
  
    :deep(.vue-slider) {
      height: 4px;
  
      .vue-slider-mark {
        width: 100%;
        height: 100%;
  
        .vue-slider-mark-step {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #212121;
          transform: translateY(-8px);
        }
  
        .vue-slider-mark-label {
          font-size: 24px;
          color: #868d9a;
          margin-top: 16px;
        }
      }
  
      .vue-slider-dot-handle {
        width: 20px;
        height: 20px;
        border: solid 2px #fff;
        background-color: #000000;
        border-radius: 50%;
        transform: translateY(-8px);
      }
  
      .custom-step.active {
        box-shadow: 0 0 0 2px #fff;
        background-color: #000000;
      }
    }
  }
  
  /deep/ .vue-slider-dot-tooltip-inner {
    display: none;
  }
  
  .progress-bar-container {
    background-color: black;
    width: 100%;
    position: relative;
  }
  
  .progress-bar-track {
    background-color: #333;
    height: 1.3125rem;
    width: 100%;
    position: relative;
  }
  
  .progress-bar-fill {
    background-color: white;
    height: 1.3125rem;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .progress-bar-thumb {
    background-color: white;
    width: 1.9375rem;
    height: 1.9375rem;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    left: 0;
    z-index: 999;
  }
  
  .progress-bar-labels {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
  }
  
  /deep/ .van-radio__label {
    color: #fff !important;
  }
  
  .Stop_flex {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
  }
  
  .purchase {
    width: 90%;
    margin-left: 5%;
    padding-bottom: 20px;
  
    .purchase_top {
      display: flex;
      justify-content: space-between;
      font-size: 26px;
      font-weight: bold;
      color: white;
      position: relative;
    }
  
    .purchase_fu {
      display: flex;
      justify-content: space-between;
    }
  
    .purchase_but {
      height: 3.8125rem;
      margin-top: 20px;
      display: flex;
  
      .purchase_but_left {
        width: 50%;
        height: 100%;
        border-radius: 100px;
        text-align: center;
        line-height: 3.8125rem;
        color: #726f6f;
      }
  
      .purchase_but_right {
        width: 50%;
        height: 100%;
        border-radius: 100px;
        text-align: center;
        line-height: 3.8125rem;
  
        color: lime;
        background: #383838;
      }
    }
  
    .purchase_jge {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
  
      .purchase_jge_left {
        width: 90%;
        display: flex;
        flex-direction: column;
        background: #1a1a1a;
      }
  
      .purchase_jge_rig {
        width: 8%;
        line-height: 60px;
        background: #1a1a1a;
        margin-left: 10px;
      }
    }
  
    .purchase_two {
      display: flex;
      margin-top: 40px;
      justify-content: space-between;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
  
      .purchase_two_left {
        height: 4.5rem;
        line-height: 4.5rem;
        border-radius: 5px;
        background: #1a1a1a;
        display: flex;
        justify-content: space-between;
        font-size: 30px;
        color: #bdbdbd;
        padding: 5px;
        padding-left: 20px;
  
        input {
          background-color: none !important;
        }
      }
    }
  
    .purchase_fu_but {
      height: 5.125rem;
      border-radius: 100px;
      background: #eb4b6d;
      text-align: center;
      line-height: 5.125rem;
      color: #fff;
      font-size: 40px;
      margin-top: 100px;
    }
  }
  
  :deep(.van-checkbox__label) {
    color: #fff !important;
  }
  </style>
  